<template>
  <div class="container">
    <!--添加班级按钮-->
    <el-button slot="reference" type="primary"
               style="float: left;position: relative;left: 10px; width: 200px;margin-bottom: 20px"
               @click="addDialogVisible = true">新增班级
    </el-button>

    <el-button slot="reference" type="primary"
               style="float: right;position: relative;right: 10px; width: 200px;margin-bottom: 20px"
               @click="$router.go(-1)">返回
    </el-button>

    <el-table
        :data="classesList"
        border
        style="">
      <el-table-column
          prop="className"
          label="班级名"
          height="10"
          width="200">
      </el-table-column>
      <el-table-column
          prop="courceName"
          label="课程名"
          height="10"
          width="200">
      </el-table-column>
      <el-table-column
          prop="teacherName"
          label="带班老师"
          height="10"
          width="200">
      </el-table-column>
      <el-table-column
          prop="totalStudent"
          label="总人数"
          height="10"
          width="100">
      </el-table-column>
      <el-table-column
          label="开班时间"
          width="200">
        <template slot-scope="scope">
          {{ dateFormat(scope.row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              type="success"
              @click="toClassAllStuList(scope.row)">学生管理
          </el-button>
          <el-button
              size="mini"
              type="danger"
              @click="remove(scope.row)">删除班级
          </el-button>
        </template>
      </el-table-column>
    </el-table>


    <!-- 分页 -->
    <el-pagination style="margin-top: 20px;float: right"
                   background
                   layout="prev, pager, next"
                   :page-size="pageSize"
                   :total="total"
                   @current-change="page">
    </el-pagination>

    <!--添加弹框-->
    <el-dialog title="添加班级" :visible.sync="addDialogVisible" width="50%">
      <el-form ref="form" :model="addForm" label-width="80px">
        <el-form-item label="班级名">
          <el-input v-model="addForm.className"></el-input>
        </el-form-item>
        <el-form-item label="课程类型">
          <el-select v-model="addForm.courceId" placeholder="请选择课程类型">
            <el-option v-for="(item,index) in coursesList" :label="item.courceName"
                       :value="item.courceId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="教师">
          <el-select v-model="addForm.teacherId" placeholder="请选择任课教师">
            <el-option v-for="(teacher,index) in teacherList" :label="teacher.userName"
                       :value="teacher.userId"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="cancelAdd()">取 消</el-button>
          <el-button type="primary" @click="comfirmAdd()">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: "AllClassesList",
  data() {
    return {
      classesList: [],
      pageSize: 2,
      total: null,
      user: JSON.parse(localStorage.getItem("user")),

      //弹框控制
      addDialogVisible: false,
      addStuDialogVisible: false,

      //查询表单
      querForm: {
        className: '',
        page: 1,
        size: 8
      },
      //修改表单
      addForm: {
        className: "",
        courceId: null,
        teacherId: null
      }
      //课程列表
      , coursesList: []
      //教师列表
      , teacherList: []
    }
  }, methods: {
    //规范日期格式
    dateFormat(time) {
      var date = new Date(time);
      var year = date.getFullYear();
      var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
      var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return year + "-" + month + "-" + day;
    },
    //分页
    page(currentPage) {
      const _this = this;
      var form = {
        className: _this.querForm.className,
        page: currentPage,
        size: _this.querForm.size
      }
      axios.post('http://localhost:8080/classes/findAllClassByName', form).then(function (res) {
        _this.classesList = res.data.data.content
        _this.pageSize = res.data.data.size
        _this.total = res.data.data.total
        console.log("所有班级");
        console.log(_this.classesList);
      })
    },
    remove(row) {
      const _this = this
      this.$confirm('确认删除班级【' + row.className + '】吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.delete('http://localhost:8080/classes/deleteClassById/' + row.classIdid).then(function (resp) {
          if (resp.data.code == -1) {
            _this.$alert('班级【' + row.className + '】删除失败', '错误', {
              confirmButtonText: '确定'
            });
          }
          if (resp.data.code == 0) {
            _this.$alert('班级【' + row.className + '】删除成功', '成功', {
              confirmButtonText: '确定',
              callback: action => {
                location.reload()
              }
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
    //确认增加
    , comfirmAdd() {
      let _this = this;
      var form = {
        className: _this.addForm.className,
        teacherId: parseInt(_this.addForm.teacherId),
        courceId: parseInt(_this.addForm.courceId)
      }
      console.log(form)
      //班级添加
      axios.post(
          'http://localhost:8080/classes/addClass'
          , form).then(function (res) {
        if (res.data.code == -1) {
          _this.$alert('班级【' + form.className + '】添加失败', '错误', {
            confirmButtonText: '确定'
          });
          _this.addDialogVisible = false
        }
        if (res.data.code == 0) {
          _this.$alert('班级【' + form.className + '】添加成功', '成功', {
            confirmButtonText: '确定',
            callback: action => {
              location.reload()
              //关闭
              _this.addDialogVisible = false;
              _this.addForm.className = '';
              _this.addForm.courceId = null;
              _this.addForm.teacherId = null;
            }
          });
        }
      })

    }
    //取消增加
    , cancelAdd() {
      //关闭
      this.addDialogVisible = false;
      //清零
      this.addForm.courceId = '';
      this.addForm.teacherId = null;
      this.addForm.className = null;
    }
    //查询所有的老师
    , getAllTeacher() {
      const _this = this;
      var findAllUserForm = {
        page: 1,
        role: 1,
        size: 10000000,
        userName: ""
      }
      axios.post("http://localhost:8080/userinfo/findAllUserByRole", findAllUserForm).then(function (res) {
        _this.teacherList = res.data.data.content;
        console.log("_this.teacherList")
        console.log(_this.teacherList)
      })
    }
    //查询所有课程
    , getAllCourse() {
      const _this = this;
      axios.get("http://localhost:8080/courseMaster/findAllCourse").then(function (res) {
        _this.courseList = res.data.data;
        console.log("_this.courseList");
        for (let i = 0; i < _this.courseList.length; i++) {
          console.log(_this.courseList[i])
          console.log(_this.courseList[i].courceId)
          console.log(_this.courseList[i].courceName)
        }
        console.log(_this.courseList);
        console.log(_this.courseList.length);
      })
    }
    , getAddOptions() {
      this.getAllCourse();
      this.getAllTeacher();
    }
    //跳转所有学生列表
    , toClassAllStuList(row) {
      this.$router.push({
        path: '/classAllStuList',
        query: {
          classIdid: row.classIdid
        }
      })
    }
  }, created() {
    this.getAddOptions();
    const _this = this;
    axios.post('http://localhost:8080/classes/findAllClassByName', _this.querForm).then(function (res) {
      console.log(res);
      _this.classesList = res.data.data.content
      _this.pageSize = res.data.data.size
      _this.total = res.data.data.total
      console.log("所有班级");
      console.log(res);
    })

  }
}
</script>

<style scoped>
.container {
  width: 70%;
  margin: auto;
}
</style>
